<gm:page title="Mode de Positionnement avec position" authenticate="false">
 
  
     <!-- position (Mode de positionnement)
 
     Vous pouvez spécifier pour un passage, s'il doit être positionné de
     façon relative ou absolue.
 
 
     Explication:
 
     Avec "position:" vous pouvez déterminer le mode de positionnement.
 
     Les mentions suivantes sont permises:
 
     absolute = Positionnement absolu, mesuré à partir du bord de 
                l'élément parent; peut défiler.
     fixed    = Positionnement absolu, mesuré à partir du bord de 
                l'élément parent; reste fixe lors du défilement. 
     relative = Positionnement relatif mesuré à partir de la position de 
                départ de l'élément proprement dit.
     static   = Pas de positionnement spécial, flux normal de l'élément 
                (réglage par défaut).
 
     En particulier la conduite des mentions absolute et relative 
     déconcerte un peu au début. 
 
     Car absolute se comporte après tout de façon relative, comme le 
     montrent les éléments "div" intérieurs de l'exemple ci-dessous:  
     relativement en effet par rapport au bord de l'élément parent. 
 
     Quand autrement, il n'y a pas d'élément parent, c'est l'élément "body"
     qui est l'élément parent. 
 
     La mention relative se réfère par contre à la position normale de 
     l'élément lui même.
 
     La mention "position:" n'établit pas encore fermement où exactement un
     élément doit commencer. 
 
     La mention n'a de sens que si vous mentionnez en même temps la position
     de départ désirée. 
 
     C'est ce que vous pouvez faire par exemple avec des mentions sur la  
     position à partir du haut ou bien sur la  Position à partir de la 
     gauche.
 
     Si vous mentionnez par exemple "position:absolute; top:30px", alors 
     vous fixez pour l'élément concerné qu'il doit commencer 30 pixels sous 
     le bord inférieur de l'élément parent.
 
     Si vous mentionnez par exemple "position:relative; top:5px" alors vous
     fixez que le bord supérieur de l'élément se trouve 5 pixels plus bas 
     qu'il ne serait normalement.
 
 
     Attention:
 
     La mention "fixed" n'est encore interprétée ni par Netscape ni par 
     l'Explorer Internet MS .
 
     Ni Netscape ni l'Explorer Internet MS n'interprètent les mentions de 
     positionnement absolu dans tous les éléments HTML. 
 
     Pour avoir une compatibilité maximale vers l'aval, il est 
     provisoirement préférable de n'employer ces mentions que sur le repère
     HTML "div". 
 
     Incluez simplement les autres éléments comme les paragraphes de texte,
     les graphiques, les tableaux, les formulaires etc. dans des éléments 
     "div" correspondants.
 
     Netscape et l' Explorer Internet MS réagissent différemment pour le 
     positionnement absolu en ce qui concerne la largeur automatique 
     d'éléments. 
 
     Vous pouvez rencontrer ce cas si vous notez une mention pour "left:"
     et que vous ne notez pas quelle largeur doit avoir le passage ainsi 
     défini. 
 
     Netscape étire l'élément au maximum jusqu'au bord droit de la fenêtre 
     ou de la page, tandis que l' Explorer Internet MS l'étire au delà du 
     bord droit (l'utilisateur est obligé de faire défiler horizontalement).
    
     Pour un positionnement relatif les deux navigateurs réagissent comme
     l' Explorer Internet MS pour le positionnement absolu. 
 
     Pour éviter cet effet, vous pouvez par exemple faire des mentions sur 
     la "width" (Largeur) du passage positionné. -->
 
 
     <!-- Déclaration fonction -->
     <HEAD>
 
     <style type="text/css"> 
     body { }
     #boite1 { position:absolute; top:10px; left:10px; width:150px; height:150px; z-index:1; }
     #boite2 { position:absolute; top:40px; left:40px; width:100px; height:100px; z-index:2; }
     #boite3 { position:absolute; top:80px; left:50px; width:150px; height:150px; z-index:3; }
     #boite4 { position:absolute; top:40px; left:20px; width:70px; height:70px; z-index:1;  }
     #boite5 { position:absolute; top:60px; left:10px; width:80px; height:80px; z-index:2; }
     #boite6 { position:absolute; top:20px; left:50px; width:90px; height:90px; z-index:-1; }
     </style>
                                           
     </HEAD>
  
     <!-- Appel fonction -->
 
     <BODY bgcolor="FFFFFF" text="#000000">
 
     <br><br><br><br><br><br><br> <br><br><br><br><br>
 
     <p>
     boite1  position:absolute; top:10px; left:10px; width:150px; height:150px; z-index:1;<br> 
     boite2  position:absolute; top:40px; left:40px; width:100px; height:100px; z-index:2;<br> 
     boite3  position:absolute; top:80px; left:50px; width:150px; height:150px; z-index:3;<br>
     boite4  position:absolute; top:40px; left:20px; width:70px; height:70px; z-index:1;<br>      
     boite5  position:absolute; top:60px; left:10px; width:80px; height:80px; z-index:2;<br>     
     boite6  position:absolute; top:20px; left:50px; width:90px; height:90px; z-index:-1;<br> 
     </p> 
     

     
 
     <div id="boite1" style="background:red; border:solid 2px blue;">
     boite 1
     </div>
 
     <div id="boite2" style="background:blue; border:solid 2px white;">
     boite 2 
     </div>
     
     <div id="boite3" style="background:yellow; border:solid 2px red;">
     boite 3        
       <div id="boite4" style="background:gold; border:solid 2px green;">
       boite 4
       </div>        
       <div id="boite5" style="background:lime; border:solid 2px navy;">
       boite 5
       </div>        
       <div id="boite6" style="background:red; border:solid 2px blue;">
       boite 6
       </div>
     </div>
           
      
     </BODY>
 
</gm:page>